<template>
  <div class="transaction-record-page">
    <!-- 导航栏 -->
    <van-nav-bar title="交易记录" left-arrow @click-left="onBack" />
    
    <!-- 筛选栏 -->
    <van-tabs v-model:active="activeTab" @change="onTabChange">
      <van-tab title="全部" name="all" />
      <van-tab title="消费" name="expense" />
      <van-tab title="退款" name="refund" />
    </van-tabs>
    
    <!-- 交易记录列表 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多记录了"
        @load="loadMore"
      >
        <van-card
          v-for="record in filteredRecords"
          :key="record.id"
          class="transaction-card"
          :title="record.title"
          :desc="record.time"
        >
          <template #footer>
            <div class="transaction-amount" :class="{ 'expense': record.type === 'expense', 'refund': record.type === 'refund' }">
              {{ record.type === 'expense' ? '-' : '+' }}¥{{ record.amount.toFixed(2) }}
            </div>
          </template>
        </van-card>
      </van-list>
    </van-pull-refresh>
    
    <!-- 空状态 -->
    <div v-if="filteredRecords.length === 0 && !loading && !refreshing" class="empty-state">
      <van-empty image="empty" description="暂无交易记录" />
      <van-button type="primary" size="normal" @click="onRefresh">刷新</van-button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';

// 模拟交易记录数据
const records = ref([
  {
    id: 1,
    type: 'expense', // expense: 消费, refund: 退款
    title: '超市购物',
    time: '2023-06-15 18:30',
    amount: 128.50,
    note: '生活用品'
  },
  {
    id: 2,
    type: 'refund',
    title: '衣服退款',
    time: '2023-06-12 14:15',
    amount: 299.00,
    note: '尺寸不合适'
  },
  {
    id: 3,
    type: 'expense',
    title: '餐厅用餐',
    time: '2023-06-10 19:45',
    amount: 388.00,
    note: '家庭聚餐'
  },
  {
    id: 4,
    type: 'expense',
    title: '在线购物',
    time: '2023-06-08 10:20',
    amount: 599.00,
    note: '电子产品'
  },
  {
    id: 5,
    type: 'refund',
    title: '酒店退款',
    time: '2023-06-05 11:30',
    amount: 899.00,
    note: '取消预订'
  },
  {
    id: 6,
    type: 'expense',
    title: '加油',
    time: '2023-06-03 08:10',
    amount: 350.00,
    note: '95号汽油'
  },
  {
    id: 7,
    type: 'expense',
    title: '电影票',
    time: '2023-06-01 20:00',
    amount: 120.00,
    note: '科幻大片'
  },
  {
    id: 8,
    type: 'refund',
    title: '机票退款',
    time: '2023-05-28 15:45',
    amount: 1299.00,
    note: '航班取消'
  }
]);

// 状态管理
const activeTab = ref('all');
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

// 筛选记录
const filteredRecords = computed(() => {
  if (activeTab.value === 'all') {
    return records.value;
  }
  return records.value.filter(record => record.type === activeTab.value);
});

// 刷新数据
const onRefresh = () => {
  refreshing.value = true;
  
  // 模拟刷新延迟
  setTimeout(() => {
    // 实际项目中这里会从API获取最新数据
    refreshing.value = false;
    finished.value = false;
  }, 1000);
};

// 加载更多
const loadMore = () => {
  if (loading.value || finished.value) return;
  
  loading.value = true;
  
  // 模拟加载延迟
  setTimeout(() => {
    // 实际项目中这里会加载更多数据
    loading.value = false;
    finished.value = true; // 模拟没有更多数据
  }, 1000);
};

// 切换标签
const onTabChange = (value) => {
  activeTab.value = value;
};

// 返回上一页
const onBack = () => {
  // 实际项目中这里会调用路由返回
  console.log('返回上一页');
};

// 页面加载时初始化数据
onMounted(() => {
  onRefresh();
});
</script>

<style scoped>
.transaction-record-page {
  min-height: 100vh;
  background-color: #f7f8fa;
}

.van-tabs {
  background-color: #fff;
}

.transaction-card {
  margin: 12px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: none;
}

.transaction-amount {
  font-size: 18px;
  font-weight: 600;
}

.expense {
  color: #f56c6c;
}

.refund {
  color: #67c23a;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  height: calc(100vh - 100px);
}

.van-empty {
  margin-bottom: 24px;
}
</style>